/*
 * @Description:
 * @Author: LCL
 * @Date: 2021-11-19
 * @LastEditors: LCL
 * @LastEditTime: 2021-12-07
 * @FilePath: /beff/src/components/drag/FrontEndEvent/HBModal.tsx
 */

import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Form, Input, Modal, Space } from 'antd';
import styles from './index.less';
import InsertItem from './insertItem';
import type { Options } from './ResultModal';

interface ModalFormProps {
  visible: boolean;
  requestType: 'get' | 'post';
  headerBody: {
    header: any[];
    body: any[];
  };
  options: Options[];
  onCancel: () => void;
}
const HBModal: React.FC<ModalFormProps> = ({
  visible,
  options,
  requestType,
  headerBody,
  onCancel,
}) => {
  const [form] = Form.useForm();
  const { header, body } = headerBody;

  const onOk = () => {
    form.submit();
  };

  return (
    <Modal
      title="Header/Body设置"
      visible={visible}
      onOk={onOk}
      onCancel={onCancel}
      bodyStyle={{ maxHeight: '455px', overflow: 'auto' }}
      width={600}
      destroyOnClose={true}
    >
      <Form form={form} layout="vertical" name="headerForm" preserve={false}>
        <div>
          Header
          <Form.List name="header" initialValue={header}>
            {(fields, { add, remove }) => {
              return (
                <>
                  {fields.map(({ key, name, fieldKey, ...restField }) => {
                    return (
                      <Space key={key} style={{ display: 'flex', marginTop: 8 }} align="baseline">
                        <Form.Item
                          {...restField}
                          name={[name, 'name']}
                          fieldKey={[fieldKey, 'name']}
                          className={styles.marginBottom}
                        >
                          <Input placeholder="name" />
                        </Form.Item>
                        <Form.Item
                          {...restField}
                          name={[name, 'value']}
                          fieldKey={[fieldKey, 'value']}
                          className={styles.marginBottom}
                        >
                          <Input placeholder="value" style={{ width: 310 }} />
                        </Form.Item>
                        <DeleteOutlined onClick={() => remove(name)} className={styles.delete} />
                      </Space>
                    );
                  })}
                  <Form.Item>
                    <Button
                      type="text"
                      onClick={() => {
                        add();
                      }}
                      icon={<PlusOutlined />}
                      className={styles.add}
                    >
                      Header
                    </Button>
                  </Form.Item>
                </>
              );
            }}
          </Form.List>
        </div>
        {requestType === 'post' && (
          <div>
            Body
            <Form.List name="body" initialValue={body}>
              {(fields, { add, remove }) => {
                return (
                  <>
                    {fields.map(({ key, name, fieldKey, ...restField }) => {
                      return (
                        <Space key={key} className={styles.space} align="baseline">
                          <Form.Item
                            {...restField}
                            name={[name, 'name']}
                            fieldKey={[fieldKey, 'name']}
                            className={styles.marginBottom}
                            style={{ width: 120 }}
                          >
                            <Input placeholder="name" />
                          </Form.Item>
                          <InsertItem
                            configProps={{
                              ...restField,
                              name: [name, 'value'],
                              fieldKey: [fieldKey, 'value'],
                              className: styles.marginBottom,
                            }}
                            options={options}
                            inputProps={{ placeholder: 'value', style: { width: 290 } }}
                            type="input"
                          >
                            <div className={styles.insertWord}>插入字段</div>
                          </InsertItem>
                          <DeleteOutlined onClick={() => remove(name)} className={styles.delete} />
                        </Space>
                      );
                    })}
                    <Form.Item>
                      <Button
                        type="text"
                        onClick={() => {
                          add();
                        }}
                        icon={<PlusOutlined />}
                        className={styles.add}
                      >
                        Body
                      </Button>
                    </Form.Item>
                  </>
                );
              }}
            </Form.List>
          </div>
        )}
      </Form>
    </Modal>
  );
};

export default HBModal;
